<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>jQuery在线考试倒计时界面</title>
    <link th:href="@{/css/kaomain.css}" href="css/kaomain.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/kaoiconfont.css}" href="css/kaoiconfont.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/kaotest.css}" href="css/kaotest.css" rel="stylesheet" type="text/css" />

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }

        .reading h2 a {
            text-decoration: none;
            color: #59595b;
            font-size: 20px;
        }

        .reading h2 a:hover {
            color: #2183f1;
        }
    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="/study-examination/handpaper" method="post">
                    <div class="test_title">
                        <p class="test_time">
                            <!--下方的倒计时前的图片-->
                            <i class="icon iconfont"></i><b class="alt-1">00:[[${list111.examinationPaperduration}]]</b>
                        </p>
                        <font><input type="submit" name="test_jiaojuan" value="交卷"></font>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">

                            <p>
                                <span>共</span><i class="content_lit">[[${list.size()}]]</i><span>题，</span><span>合计</span><i class="content_fs">100</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li th:each="test: ${list}" th:id="'qu_0_'+${test.testPaperNum}">
                                <input type="hidden" th:name="'list['+${(test.testPaperNum)-1}+'].empId'" th:value="${session.USER.id}">
                                <input type="hidden" th:name="'list['+${(test.testPaperNum)-1}+'].empResultNum'" th:value="${test.testPaperNum}">
                                <div class="test_content_nr_tt">
                                    <i>[[${test.testPaperNum}]]</i><span>分数（[[${test.testPaperScore}]]）</span><font>[[${test.testPaperOpic}]]</font><b class="icon iconfont"></b>
                                </div>

                                <div th:if="${test.testType==1}"  class="test_content_nr_main">
                                    <input type="hidden" th:value="${test.testType}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultTestType'">
                                    <input type="hidden" th:value="${test.testPaperScore}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultGrade'">
                                    <ul>

                                        <li class="option">

                                            <input th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="radio" class="radioOrCheck" name="answer2"
                                               value="A"  th:id="'0_answer_'+${(test.testPaperNum)}+'_option_1'"    />
                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_1'">
                                                A.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptiona}]]</p>
                                            </label>
                                        </li>

                                        <li  class="option">

                                            <input th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="radio" class="radioOrCheck" name="answer2"
                                                   value="B"  th:id="'0_answer_'+${(test.testPaperNum)}+'_option_2'"   />


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_2'">
                                                B.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptionb}]]</p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="radio" class="radioOrCheck" name="answer2"
                                                   value="C"  th:id="'0_answer_'+${(test.testPaperNum)}+'_option_3'"   />


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_3'">
                                                C.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptionc}]]</p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="radio" class="radioOrCheck" name="answer2"
                                                   value="D"  th:id="'0_answer_'+${(test.testPaperNum)}+'_option_4'"  />


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_4'" >
                                                D.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptiond}]]</p>
                                            </label>
                                        </li>

                                    </ul>
                                </div>
                                <div th:if="${test.testType==2}" class="test_content_nr_main">
                                    <input type="hidden" th:value="${test.testType}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultTestType'">
                                    <input type="hidden" th:value="${test.testPaperScore}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultGrade'">
                                    <ul>

                                        <li class="option">

                                            <input th:id="'0_answer_'+${(test.testPaperNum)}+'_option_1'" value="A"  th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="checkbox" class="radioOrCheck" name="answer1"/>
                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_1'">
                                                A.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptiona}]]</p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input th:id="'0_answer_'+${(test.testPaperNum)}+'_option_2'"  value="B"  th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="checkbox" class="radioOrCheck" name="answer1"/>


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_2'">
                                                B.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptionb}]]</p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input th:id="'0_answer_'+${(test.testPaperNum)}+'_option_3'" value="C"  th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="checkbox" class="radioOrCheck" name="answer1"/>


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_3'">
                                                C.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptionc}]]</p>
                                            </label>
                                        </li>

                                        <li class="option">

                                            <input th:id="'0_answer_'+${(test.testPaperNum)}+'_option_4'"  value="D"  th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" type="checkbox" class="radioOrCheck" name="answer1"/>


                                            <label th:for="'0_answer_'+${(test.testPaperNum)}+'_option_4'">
                                                D.
                                                <p class="ue" style="display: inline;">[[${test.testQuestionsOptiond}]]</p>
                                            </label>
                                        </li>

                                    </ul>
                                </div>
                                <div th:if="${test.testType==3}" class="test_content_nr_main">
                                    <input type="hidden" th:value="${test.testType}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultTestType'">
                                    <input type="hidden" th:value="${test.testPaperScore}" th:name="'list['+${(test.testPaperNum)-1}+'].empResultGrade'">
                                   <textarea th:name="'list['+${(test.testPaperNum)-1}+'].empResultAnswer'" rows="10" cols="80"></textarea>
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <!--答题卡前面的图片-->
                            <i class="icon iconfont"></i>答题卡
                        </h1>
                        <p class="test_time">
                            <!--时间倒计时前面的图片-->
                           <b class="alt-1">00:[[${list111.examinationPaperduration}]]</b>
                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <p>
                                <span>共</span><i class="content_lit">[[${list.size()}]]</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <li th:each="biao:${list}"><a th:href="'#qu_0_'+${biao.testPaperNum}">[[${biao.testPaperNum}]]</a></li>
                            </ul>
                        </div>
                    </div>



                </div>

            </div>
        </div>
    </div>
    <!--nr end-->


    <div class="foot"></div>


</div>

<script src="http://cdn.bootstrapmb.com/jquery/jquery-1.11.1.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script th:src="@{/js/jquery.countdown.js}" src="/js/jquery.countdown.js"></script>
<script>
    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });


    $(function () {
        $('li.option label').click(function () {
            // debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });
</script>


</body>

</html>
<!--下面是无用代码-->
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>

